<template>
  <div class="app-container-page CM_DISPATCH">
    <div class="DISPATCH_Left" v-if="showLeft">
      <section class="YT_FILTER">
        <Form ref="formInline" :model="formItem" inline>
            <FormItem>
               <Select v-model="formItem.select1">
                 <Option value="shehua">摄化</Option>
                 <Option value="bupai">补拍</Option>
                 <Option value="chongpai">重拍</Option>
                 <Option value="sipai">四拍</Option>
                 <Option value="kanjingxiu">看精修</Option>
                 <Option value="kanban">看版</Option>
                 <Option value="qujian">取件</Option>
               </Select>
            </FormItem>
            <FormItem>
              <Select v-model="formItem.select2">
                <Option value="weipai">未排</Option>
                <Option value="yipai">已排</Option>
              </Select>
            </FormItem>
            <FormItem>
              <Input suffix="ios-search" placeholder="关键词搜索" style="width: auto" />
            </FormItem>
            <FormItem>
              <Button type="primary" icon="ios-search"></Button>
            </FormItem>
        </Form>
      </section>
      <vxe-table ref="xTable1" max-height="820"  resizable show-overflow size="mini" :row-config="{isHover: true}" :data="allList"
        @cell-click="handleCurrentChange" @filter-visible="filterVisibleEvent" @filter-change="filterChangeEvent">
        <vxe-table-column field="order_no" title="订单编号" width="120"></vxe-table-column>
        <vxe-table-column field="type_name" title="类型" width="80"></vxe-table-column>
        <vxe-table-column field="customer_name" title="客户姓名" width="80"></vxe-table-column>
        <vxe-table-column field="series_name" title="套系" width="200"></vxe-table-column>
        <vxe-table-column field="price" title="套系金额" width="70"></vxe-table-column>
        <vxe-table-column field="kz_phone" title="手机" width="100"></vxe-table-column>
        <vxe-table-column field="store_name" title="下单店" width="100"></vxe-table-column>
        <vxe-table-column field="store_employee" title="门市" width="80"></vxe-table-column>
        <vxe-table-column field="customer_source" title="来源" width="80"></vxe-table-column>
        <vxe-table-column field="remaining_amount" title="总欠款" width="100"></vxe-table-column>

        <vxe-table-column field="remarks" title="备注" width="110"></vxe-table-column>
        <vxe-table-column field="order_time" fixed="right" title="下单日期" width="80"></vxe-table-column>
        <vxe-table-column field="planned_shooting_time" fixed="right" title="预拍" width="80"></vxe-table-column>
        <vxe-table-column title="操作" fixed="right" width="60">
          <template #default>
            <!-- <Button icon="ios-color-wand-outline"></Button> -->
            <Button :style="{ color: '#c5c8ce' }" icon="ios-flag-outline"></Button>
          </template>
        </vxe-table-column>
        <vxe-table-column field="order_time" fixed="right" title="提排时间" width="80"></vxe-table-column>
        <vxe-table-column field="order_photographer" fixed="right" title="提排员工" width="80"></vxe-table-column>
      </vxe-table>
    </div>
    <div class="DISPATCH_Right">
      <Tabs :value="name" @on-click="handleEditTabClick" :animated="false" name="2">
        <TabPane tab="2" label="选片" name="xuanpian">
        </TabPane>
        <TabPane tab="2" label="看精修" name="kanjingxiu">
        </TabPane>
        <TabPane tab="2" label="看板" name="kanban">
        </TabPane>
        <TabPane tab="2" label="取件" name="qujian">
        </TabPane>
      </Tabs>
      <!-- 摄影师 -->
      <div class="status ps" v-if="showLeft">
        <div class="group g_3">
          <label>
            <Icon type="md-woman" />
            选片师
          </label>
          <div class="staff">
            <div class=" has-tooltip" @click="select_photo(index)" :class="photoIndex == index ? 'selected' : ''" v-for="(o,index) in filmSelectorList" :key="o.employee_id">
               <b>{{o.employee_name}}</b>
               <span><small>3.00</small></span>
            </div>
          </div>
        </div>
        <!-- <div class="group g_3">
          <label>
            <Icon type="md-woman" />
            摄影师
          </label>
          <div class="staff">
            <div class=" has-tooltip" @click="select_photo(index)" :class="photoIndex == index ? 'selected' : ''" v-for="(o,index) in photographerList" :key="o.employee_id">
               <b>{{o.employee_name}}</b>
               <span><small>3.00</small></span>
            </div>
          </div>
        </div>
        <div class="group g_3">
          <label>
            <Icon type="md-woman" />
            化妆师
          </label>
          <div class="staff">
            <div class=" has-tooltip" @click="select_cosmetician(index)" :class="cosmeticianIndex == index ? 'selected' : ''" v-for="(o,index) in cosmeticianList" :key="o.employee_id">
               <b>{{o.employee_name}}</b>
               <span><small>3.00</small></span>
            </div>
          </div>
        </div> -->
      </div>
      <div class="fullCalendarContent">
        <aside>
          <header id="CM_calendar_header">
            <div class="sc-actions">
              <Icon class="sc-mleft" type="ios-arrow-back" @click="preMon" />
              <select v-model="yearVal" class="sc-select-year">
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
                <option value="2022">2022</option>
                <option value="2023">2023</option>
                <option value="2024">2024</option>
                <option value="2025">2025</option>
                <option value="2026">2026</option>
                <option value="2027">2027</option>
                <option value="2028">2028</option>
                <option value="2029">2029</option>
                <option value="2030">2030</option>
                <option value="2031">2031</option>
                <option value="2032">2032</option>
                <option value="2033">2033</option>
                <option value="2034">2034</option>
                <option value="2035">2035</option>
                <option value="2036">2036</option>
                <option value="2037">2037</option>
                <option value="2038">2038</option>
                <option value="2039">2039</option>
                <option value="2040">2040</option>
              </select>
              <select v-model="monthVal" class="sc-select-month form-control">
                <option value="1">一月</option>
                <option value="2">二月</option>
                <option value="3">三月</option>
                <option value="4">四月</option>
                <option value="5">五月</option>
                <option value="6">六月</option>
                <option value="7">七月</option>
                <option value="8">八月</option>
                <option value="9">九月</option>
                <option value="10">十月</option>
                <option value="11">十一月</option>
                <option value="12">十二月</option>
              </select>
              <Icon class="sc-mright" type="ios-arrow-forward" @click="nextMon" />
            </div>
          </header>
          <div class="schedule ivu-table ivu-table-default ivu-table-border">
            <table cellspacing="0" cellpadding="0" border="0">
              <tr class="ivu-table-row">
                <td rowspan="3">08:30</td>
                <td>档期1</td>
              </tr>
              <tr class="ivu-table-row">
                <td>档期2</td>
              </tr>
              <tr class="ivu-table-row">
                <td>档期3</td>
              </tr>
              <tr class="ivu-table-row bg">
                <td rowspan="2">10:00</td>
                <td>档期1</td>
              </tr>
              <tr class="ivu-table-row bg" >
                <td>档期2</td>
              </tr>
              <tr class="ivu-table-row">
                <td rowspan="3">10:40</td>
                <td>档期1</td>
              </tr>
              <tr class="ivu-table-row">
                <td>档期2</td>
              </tr>
              <tr class="ivu-table-row">
                <td>档期3</td>
              </tr>
              <tr class="ivu-table-row bg">
                <td rowspan="3">13:30</td>
                <td>档期1</td>
              </tr>
              <tr class="ivu-table-row bg">
                <td>档期2</td>
              </tr>
              <tr class="ivu-table-row bg">
                <td>档期3</td>
              </tr>
              <tr class="ivu-table-row">
                <td rowspan="6">15:40</td>
                <td>档期1</td>
              </tr>
              <tr class="ivu-table-row">
                <td>档期2</td>
              </tr>
              <tr class="ivu-table-row">
                <td>档期3</td>
              </tr>
              <tr class="ivu-table-row">
                <td>档期4</td>
              </tr>
              <tr class="ivu-table-row">
                <td>档期5</td>
              </tr>
              <tr class="ivu-table-row">
                <td>档期6</td>
              </tr>
              <tr class="ivu-table-row bg">
                <td rowspan="2">17:30</td>
                <td>档期1</td>
              </tr>
              <tr class="ivu-table-row bg" >
                <td>档期2</td>
              </tr>
            </table>
          </div>
        </aside>
        <div class="MAIN">
          <div id="YT_calendar_container" class="sc-calendar">
            <div class="sc-body">
              <div class="sc-days">
                <div class="sc-item"
                  :class="[{'mon': item.weekDay === '日'}, {'sc-today column_hover': dayVal == item.day}]"
                  v-for="item in daysList" :id="item.id" :key="item.id">
                  <span></span>
                  <small>{{item.weekDay}}</small>
                  <div class="day">
                    <time>{{item.mon}}</time>{{item.day}}
                  </div>
                  <div class="lunar-day">{{item.mark}}</div>
                  <b></b>
                </div>
              </div>
            </div>
          </div>
          <div id="YT_schedule_table" class="ivu-table ivu-table-default ivu-table-border ps">
            <table cellspacing="0" cellpadding="0" border="0">
              <tr class="ivu-table-row" v-for="(o,index) in 19" :key="index">
                <td :class="[{ 'selected': isActive(index,i) },{'mon': item.weekDay === '日'}]"
                  @click="handleClick(index,i)" v-for="(item,i) in daysList" :id="item.id" :key="item.id"></td>
              </tr>
            </table>
          </div>
        </div>

        <!-- <FullCalendar id="calendar" ref="myfullCalendar" class="demo-app-calendar" :options="calendarOptions">
      </FullCalendar> -->
      </div>
      <!-- <div class="table-box" v-loading="loading">
        <vxe-table ref="xTable1" max-height="620" show-overflow size="mini" :row-config="{isHover: true}" :data="list"
          @cell-click="handleCurrentChange" @filter-visible="filterVisibleEvent" @filter-change="filterChangeEvent">
          <vxe-table-column field="order_no" title="订单编号" width="120"></vxe-table-column>
          <vxe-table-column field="type_name" title="类型" width="80"></vxe-table-column>
          <vxe-table-column field="customer_name" title="客户姓名" width="80"></vxe-table-column>
          <vxe-table-column field="series_name" title="套系" width="200"></vxe-table-column>
          <vxe-table-column field="type_name" title="景点" width="100"></vxe-table-column>
          <vxe-table-column field="price" title="套系金额" width="70"></vxe-table-column>
          <vxe-table-column field="store_name" title="下单店" width="100"></vxe-table-column>
          <vxe-table-column field="store_employee" title="门市" width="80"></vxe-table-column>
          <vxe-table-column field="customer_source" title="来源" width="80"></vxe-table-column>
          <vxe-table-column field="tracking_note" title="流程备注" width="110"></vxe-table-column>
          <vxe-table-column field="remarks" title="备注" width="110"></vxe-table-column>
          <vxe-table-column field="modified_time" fixed="right" title="排时" width="140"></vxe-table-column>
          <vxe-table-column field="order_photographer" fixed="right" title="选片师" width="140"></vxe-table-column>
          <vxe-table-column title="操作" fixed="right" width="80">
            <template #default>
              <Button icon="ios-color-wand-outline"></Button>
              <Button :style="{ color: '#c5c8ce' }" icon="ios-search"></Button>
            </template>
          </vxe-table-column>
        </vxe-table>
      </div> -->
    </div>
  </div>
</template>

<script>
  import FullCalendar from '@fullcalendar/vue';
  import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
  import dayGridPlugin from '@fullcalendar/daygrid';
  import interactionPlugin from '@fullcalendar/interaction';
  import orderTable from '@/views/table/components/order-table.vue'
  import {
    getOrder
  } from "@/api/order/index";
  import {
    orderScheduleApi
  } from "@/api/paikong/index";
  import {
    getEmployee
  } from '@/api/common.js'
  export default {
    name: 'OrderIndex',
    components: {
      FullCalendar
    },
    data() {
      return {
        editModal: false,
        showLeft: false,
        loading: false,
        driver: null,
        orderStateList: [],
        datalist: [],
        nowdatalist: [],
        title: '',
        name: 'xuanpian',
        yearVal: '',
        monthVal: '',
        dayVal: '',
        daysList: [],
        list: [],
        allList: [],
        activeIndex: null,
        formItem: {
          select1: 'chongpai',
          select2: 'weipai'
        },
        photographerList: [], // 摄影师集合
        photoIndex: -1,
        cosmeticianList: [], // 化妆师集合
        filmSelectorList: [], // 选片师集合
        cosmeticianIndex: -1,
        order_schedule_data: {
          order_no: '', // 订单号
          order_photographer: '', // 摄影师
          order_photographer_id: '', // 摄影师id
          order_cosmetician: '', // 化妆师
          order_cosmetician_id: '', // 化妆师id
          control_date: '', // 排控日期
          order_assistant_photographer: '李菲', // 助理摄影师
          order_assistant_photographer_id: 94, // 助理摄影师id
        }
      }
    },
    computed: {
      hasOrderData() {
        return !!this.order_schedule_data.order_no && !!this.order_schedule_data.order_photographer && !!this.order_schedule_data.order_photographer_id && !!this.order_schedule_data.order_cosmetician && !!this.order_schedule_data.order_cosmetician_id && !!this.order_schedule_data.control_date;
      }
    },
    watch: {
      hasOrderData(newVal, oldVal) {
        if (newVal) {
          this.setOrderSchedule()
        }
      }
    },
    mounted() {
      // 获取当前日期
      const today = new Date();
      // 获取当前年和当前月
      this.yearVal = today.getFullYear();
      this.monthVal = today.getMonth() + 1; // getMonth() 返回 0 到 11 之间的数字，所以需要加 1
      // 获取今天是当月的第几天
      this.dayVal = today.getDate();
      this.getAllDays()
      this.getCateEmployee(9)
      // this.getCateEmployee(13)
      // this.getCateEmployee(15)
      this.getOrderData({
        pageIndex: 1,
        pageSize: 5
      })
      this.getAllOrderData({
        pageIndex: 1,
        pageSize: 50
      })
    },
    methods: {
      getAllOrderData(param) {
        this.loading = true;
        getOrder(param)
          .then((res) => {
            console.log('获取订单列表', res);
            this.loading = false;
            if (res.rstpCode === '0000') {
              this.allList = res.data;
              this.allList.forEach(item => {
                for (let key in item) {
                  if (item[key] == null || item[key] == "null" || item[key] == "None") {
                    item[key] = ""
                  }
                }
              })
            } else {
              this.$Message.error(res.rstpMsg);
            }
          })
      },
      getOrderData(param) {
        this.loading = true;
        getOrder(param)
          .then((res) => {
            console.log('获取订单列表', res);
            this.loading = false;
            if (res.rstpCode === '0000') {
              this.list = res.data;
              this.list.forEach(item => {
                for (let key in item) {
                  if (item[key] == null || item[key] == "null" || item[key] == "None") {
                    item[key] = ""
                  }
                }
              })
            } else {
              this.$Message.error(res.rstpMsg);
            }
          })
      },
      getCateEmployee(positionId) {
        getEmployee({
          position_id: positionId
        }).then(res => {
          console.log('根据条件检索员工信息', res);
          if (res.rstpCode === '0000') {
            if (positionId == 13) {
              this.photographerList = res.data;
            } else if (positionId == 15) {
              this.cosmeticianList = res.data;
            } else if (positionId == 9) {
              this.filmSelectorList = res.data;
            }
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      },
      // 排控
      setOrderSchedule() {
        console.log('排控');
        const formData = new FormData();
        for (let key in this.order_schedule_data) {
          formData.append(key, this.order_schedule_data[key]);
        }
        orderScheduleApi(this.order_schedule_data).then((res) => {
          console.log('排控', res);
          if (res.rstpCode === '0000') {
            this.$Message.success('排控成功');
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      },
      // 选择摄影师
      select_photo(index) {
        this.photoIndex = index;
        this.order_schedule_data.order_photographer = this.photographerList[index].employee_name;
        this.order_schedule_data.order_photographer_id = this.photographerList[index].employee_id;
      },
      // 选择摄影师
      select_cosmetician(index) {
        this.cosmeticianIndex = index;
        this.order_schedule_data.order_cosmetician = this.photographerList[index].employee_name;
        this.order_schedule_data.order_cosmetician_id = this.photographerList[index].employee_id;
      },
      // 选中表格中的某一行
      handleCurrentChange({
        row
      }) {
        console.log(row);
        this.order_schedule_data.order_no = row.order_no
        // this.orderSingleData = row
        // this.$store.dispatch("layout/app/bcOrderRowData", row);
        // this.showOrderModal = true
      },
      filterVisibleEvent({
        column,
        visible
      }) {
        console.log(`${column.property} ${visible ? '打开' : '关闭'}筛选面板`)
      },
      filterChangeEvent({
        column
      }) {
        console.log(`${column.property} 筛选了数据`)
      },
      handleClick(index, i) {
        console.log(this.yearVal, this.monthVal, this.daysList[i].day);
        this.order_schedule_data.control_date = `${this.yearVal}-${this.monthVal}-${this.daysList[i].day}`
        this.activeIndex = `${index}_${i}`;
        this.showLeft = true
      },
      isActive(index, i) {
        return this.activeIndex === `${index}_${i}`;
      },
      getAllDays() {
        // 创建一个新的日期对象，设置为下一个月的第 0 天，即为当前月的最后一天
        this.daysList = []
        const daysInMonth = new Date(this.yearVal, this.monthVal, 0).getDate();
        console.log(`当前月有 ${daysInMonth} 天`);
        for (let i = 1; i < daysInMonth + 1; i++) {
          const map = {
            id: `day_${this.yearVal}-${this.monthVal}-${i}`,
            weekDay: this.getDayOfWeek(this.yearVal, this.monthVal, i),
            mon: `${this.monthVal}.`,
            day: i,
            mark: '1/9'
          }
          this.daysList.push(map)
        }
      },
      preMon() {
        this.monthVal--
        if (this.monthVal < 1) {
          this.monthVal = 12
          this.yearVal--
        }
        this.getAllDays()
      },
      nextMon() {
        this.monthVal++
        console.log(this.yearVal, this.monthVal);
        if (this.monthVal > 12) {
          this.monthVal = 1
          this.yearVal++
        }
        this.getAllDays()
      },
      getDayOfWeek(year, month, day) {
        // 创建一个日期对象，注意月份从 0 开始计算，所以要减 1
        const date = new Date(year, month - 1, day);

        // 获取对应的周几，返回 0（星期日）到 6（星期六）
        const dayOfWeek = date.getDay();

        // 将数字转换为对应的星期几
        const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
        return daysOfWeek[dayOfWeek];
      },
      handleEditTabClick() {

      }
    }
  }
</script>
<style scoped lang="less">
  .app-container-page {
    // padding-top: 20px;
    height: 90vh;
  }
  .CM_DISPATCH {
    display: flex;
  }
  .DISPATCH_Left {
    width: 40%;
    height: 100%;
  }
  .DISPATCH_Right {
    height: 100%;
  }
  .fullCalendarContent {
    height: 66%;
    // padding: 20px;
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: initial;
    -webkit-box-direction: initial;
    -ms-flex-direction: initial;
    flex-direction: row;
    padding: 0;
    overflow: hidden;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
</style>
